To not make it vanish on dark variant background color.
$osd_fg_color: #eeeeec;
$osd_text_color: white;
-$osd_bg_color: transparentize(#2e3436, 0.3);
+$osd_bg_color: transparentize(#202526, 0.3);
$osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5);
$osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 50%);
$osd_borders_color: transparentize(black, 0.3);
.app-notification.frame, .osd {
color: #eeeeec;
border: none;
- background-color: rgba(46, 52, 54, 0.7);
+ background-color: rgba(32, 37, 38, 0.7);
background-clip: padding-box;
outline-color: rgba(238, 238, 236, 0.3);
box-shadow: none;
.osd .entry:insensitive {
background-color: transparent;
background-image: linear-gradient(to bottom, #212121, #292929 90%);
- color: #8e9191;
+ color: #878989;
border-color: rgba(0, 0, 0, 0.7);
- background-image: linear-gradient(to bottom, rgba(65, 70, 72, 0.5));
+ background-image: linear-gradient(to bottom, rgba(52, 57, 57, 0.5));
background-clip: padding-box;
box-shadow: none;
text-shadow: none;
outline-color: rgba(238, 238, 236, 0.3);
color: #eeeeec;
border-color: rgba(0, 0, 0, 0.7);
- background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
+ background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.7));
background-clip: padding-box;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
text-shadow: 0 1px black;
.button.osd:hover {
color: white;
border-color: rgba(0, 0, 0, 0.7);
- background-image: linear-gradient(to bottom, rgba(74, 84, 87, 0.7));
+ background-image: linear-gradient(to bottom, rgba(60, 69, 71, 0.7));
background-clip: padding-box;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
text-shadow: 0 1px black;
border: none;
box-shadow: none; }
.button.osd:insensitive, .button.osd:backdrop:insensitive {
- color: #8e9191;
+ color: #878989;
border-color: rgba(0, 0, 0, 0.7);
- background-image: linear-gradient(to bottom, rgba(65, 70, 72, 0.5));
+ background-image: linear-gradient(to bottom, rgba(52, 57, 57, 0.5));
background-clip: padding-box;
box-shadow: none;
text-shadow: none;
.button.osd:backdrop {
color: #eeeeec;
border-color: rgba(0, 0, 0, 0.7);
- background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
+ background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.7));
background-clip: padding-box;
box-shadow: none;
text-shadow: none;
GtkCalendar.header .osd .button.titlebutton {
color: #eeeeec;
border-color: rgba(0, 0, 0, 0.7);
- background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
+ background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.7));
background-clip: padding-box;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
text-shadow: 0 1px black;
.osd .button:hover {
color: white;
border-color: rgba(0, 0, 0, 0.7);
- background-image: linear-gradient(to bottom, rgba(74, 84, 87, 0.7));
+ background-image: linear-gradient(to bottom, rgba(60, 69, 71, 0.7));
background-clip: padding-box;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
text-shadow: 0 1px black;
icon-shadow: none;
outline-color: rgba(238, 238, 236, 0.3); }
.osd .button:insensitive, .osd .button:backdrop:insensitive {
- color: #8e9191;
+ color: #878989;
border-color: rgba(0, 0, 0, 0.7);
- background-image: linear-gradient(to bottom, rgba(65, 70, 72, 0.5));
+ background-image: linear-gradient(to bottom, rgba(52, 57, 57, 0.5));
background-clip: padding-box;
box-shadow: none;
text-shadow: none;
.osd .button:backdrop {
color: #eeeeec;
border-color: rgba(0, 0, 0, 0.7);
- background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
+ background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.7));
background-clip: padding-box;
box-shadow: none;
text-shadow: none;
GtkCalendar.header .osd .titlebutton.button:hover {
color: white;
border-color: rgba(0, 0, 0, 0.7);
- background-image: linear-gradient(to bottom, rgba(74, 84, 87, 0.7));
+ background-image: linear-gradient(to bottom, rgba(60, 69, 71, 0.7));
background-clip: padding-box;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
text-shadow: 0 1px black;
.titlebar .osd .titlebutton.button:insensitive,
.osd GtkCalendar.header .titlebutton.button:insensitive,
GtkCalendar.header .osd .titlebutton.button:insensitive {
- color: #8e9191;
+ color: #878989;
border-color: rgba(0, 0, 0, 0.7);
- background-image: linear-gradient(to bottom, rgba(65, 70, 72, 0.5));
+ background-image: linear-gradient(to bottom, rgba(52, 57, 57, 0.5));
background-clip: padding-box;
box-shadow: none;
text-shadow: none;
icon-shadow: none;
outline-color: rgba(238, 238, 236, 0.3); }
.osd .button.suggested-action:insensitive, .osd .button.suggested-action:backdrop:insensitive {
- color: #8e9191;
+ color: #878989;
border-color: rgba(0, 0, 0, 0.7);
- background-image: linear-gradient(to bottom, rgba(65, 70, 72, 0.5));
+ background-image: linear-gradient(to bottom, rgba(52, 57, 57, 0.5));
background-clip: padding-box;
box-shadow: none;
text-shadow: none;
icon-shadow: none;
outline-color: rgba(238, 238, 236, 0.3); }
.osd .button.destructive-action:insensitive, .osd .button.destructive-action:backdrop:insensitive {
- color: #8e9191;
+ color: #878989;
border-color: rgba(0, 0, 0, 0.7);
- background-image: linear-gradient(to bottom, rgba(65, 70, 72, 0.5));
+ background-image: linear-gradient(to bottom, rgba(52, 57, 57, 0.5));
background-clip: padding-box;
box-shadow: none;
text-shadow: none;
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0);
text-shadow: none;
icon-shadow: none;
- color: #8e9191;
+ color: #878989;
border-color: rgba(0, 0, 0, 0.5);
icon-shadow: none;
box-shadow: none; }
padding: 13px;
border: none;
border-radius: 5px;
- background-color: rgba(46, 52, 54, 0.7); }
+ background-color: rgba(32, 37, 38, 0.7); }
.inline-toolbar {
border-width: 0 1px 1px;
.scale.vertical.scale-has-marks-above.scale-has-marks-below.slider {
color: #eeeeec;
border-color: rgba(0, 0, 0, 0.7);
- background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
+ background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.7));
background-clip: padding-box;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
text-shadow: 0 1px black;
icon-shadow: 0 1px black;
outline-color: rgba(238, 238, 236, 0.3);
- background-color: #2e3436; }
+ background-color: #202526; }
.osd .scale.slider:hover, .osd
.scale.scale-has-marks-above.scale-has-marks-below.slider:hover, .osd
.scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:hover {
color: white;
border-color: rgba(0, 0, 0, 0.7);
- background-image: linear-gradient(to bottom, rgba(74, 84, 87, 0.7));
+ background-image: linear-gradient(to bottom, rgba(60, 69, 71, 0.7));
background-clip: padding-box;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
text-shadow: 0 1px black;
.scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:backdrop {
color: #eeeeec;
border-color: rgba(0, 0, 0, 0.7);
- background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
+ background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.7));
background-clip: padding-box;
box-shadow: none;
text-shadow: none;
padding: 10px;
border: none;
border-radius: 0 0 6px 6px;
- background-color: rgba(46, 52, 54, 0.7);
+ background-color: rgba(32, 37, 38, 0.7);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 2px);
background-clip: padding-box; }
.app-notification:backdrop,
.app-notification.frame .button {
color: #eeeeec;
border-color: rgba(0, 0, 0, 0.7);
- background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
+ background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.7));
background-clip: padding-box;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
text-shadow: 0 1px black;
.app-notification.frame .button:hover {
color: white;
border-color: rgba(0, 0, 0, 0.7);
- background-image: linear-gradient(to bottom, rgba(74, 84, 87, 0.7));
+ background-image: linear-gradient(to bottom, rgba(60, 69, 71, 0.7));
background-clip: padding-box;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
text-shadow: 0 1px black;
.app-notification .button:insensitive, .app-notification .button:backdrop:insensitive,
.app-notification.frame .button:insensitive,
.app-notification.frame .button:backdrop:insensitive {
- color: #8e9191;
+ color: #878989;
border-color: rgba(0, 0, 0, 0.7);
- background-image: linear-gradient(to bottom, rgba(65, 70, 72, 0.5));
+ background-image: linear-gradient(to bottom, rgba(52, 57, 57, 0.5));
background-clip: padding-box;
box-shadow: none;
text-shadow: none;
.app-notification.frame .button:backdrop {
color: #eeeeec;
border-color: rgba(0, 0, 0, 0.7);
- background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
+ background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.7));
background-clip: padding-box;
box-shadow: none;
text-shadow: none;
.app-notification.frame, .osd {
color: #eeeeec;
border: none;
- background-color: rgba(46, 52, 54, 0.7);
+ background-color: rgba(32, 37, 38, 0.7);
background-clip: padding-box;
outline-color: rgba(238, 238, 236, 0.3);
box-shadow: none;
.osd .entry:insensitive {
background-color: transparent;
background-image: linear-gradient(to bottom, #f7f7f7, #ffffff 90%);
- color: #8e9191;
+ color: #878989;
border-color: rgba(0, 0, 0, 0.7);
- background-image: linear-gradient(to bottom, rgba(65, 70, 72, 0.5));
+ background-image: linear-gradient(to bottom, rgba(52, 57, 57, 0.5));
background-clip: padding-box;
box-shadow: none;
text-shadow: none;
outline-color: rgba(238, 238, 236, 0.3);
color: #eeeeec;
border-color: rgba(0, 0, 0, 0.7);
- background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
+ background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.7));
background-clip: padding-box;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
text-shadow: 0 1px black;
.button.osd:hover {
color: white;
border-color: rgba(0, 0, 0, 0.7);
- background-image: linear-gradient(to bottom, rgba(74, 84, 87, 0.7));
+ background-image: linear-gradient(to bottom, rgba(60, 69, 71, 0.7));
background-clip: padding-box;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
text-shadow: 0 1px black;
border: none;
box-shadow: none; }
.button.osd:insensitive, .button.osd:backdrop:insensitive {
- color: #8e9191;
+ color: #878989;
border-color: rgba(0, 0, 0, 0.7);
- background-image: linear-gradient(to bottom, rgba(65, 70, 72, 0.5));
+ background-image: linear-gradient(to bottom, rgba(52, 57, 57, 0.5));
background-clip: padding-box;
box-shadow: none;
text-shadow: none;
.button.osd:backdrop {
color: #eeeeec;
border-color: rgba(0, 0, 0, 0.7);
- background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
+ background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.7));
background-clip: padding-box;
box-shadow: none;
text-shadow: none;
GtkCalendar.header .osd .button.titlebutton {
color: #eeeeec;
border-color: rgba(0, 0, 0, 0.7);
- background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
+ background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.7));
background-clip: padding-box;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
text-shadow: 0 1px black;
.osd .button:hover {
color: white;
border-color: rgba(0, 0, 0, 0.7);
- background-image: linear-gradient(to bottom, rgba(74, 84, 87, 0.7));
+ background-image: linear-gradient(to bottom, rgba(60, 69, 71, 0.7));
background-clip: padding-box;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
text-shadow: 0 1px black;
icon-shadow: none;
outline-color: rgba(238, 238, 236, 0.3); }
.osd .button:insensitive, .osd .button:backdrop:insensitive {
- color: #8e9191;
+ color: #878989;
border-color: rgba(0, 0, 0, 0.7);
- background-image: linear-gradient(to bottom, rgba(65, 70, 72, 0.5));
+ background-image: linear-gradient(to bottom, rgba(52, 57, 57, 0.5));
background-clip: padding-box;
box-shadow: none;
text-shadow: none;
.osd .button:backdrop {
color: #eeeeec;
border-color: rgba(0, 0, 0, 0.7);
- background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
+ background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.7));
background-clip: padding-box;
box-shadow: none;
text-shadow: none;
GtkCalendar.header .osd .titlebutton.button:hover {
color: white;
border-color: rgba(0, 0, 0, 0.7);
- background-image: linear-gradient(to bottom, rgba(74, 84, 87, 0.7));
+ background-image: linear-gradient(to bottom, rgba(60, 69, 71, 0.7));
background-clip: padding-box;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
text-shadow: 0 1px black;
.titlebar .osd .titlebutton.button:insensitive,
.osd GtkCalendar.header .titlebutton.button:insensitive,
GtkCalendar.header .osd .titlebutton.button:insensitive {
- color: #8e9191;
+ color: #878989;
border-color: rgba(0, 0, 0, 0.7);
- background-image: linear-gradient(to bottom, rgba(65, 70, 72, 0.5));
+ background-image: linear-gradient(to bottom, rgba(52, 57, 57, 0.5));
background-clip: padding-box;
box-shadow: none;
text-shadow: none;
icon-shadow: none;
outline-color: rgba(238, 238, 236, 0.3); }
.osd .button.suggested-action:insensitive, .osd .button.suggested-action:backdrop:insensitive {
- color: #8e9191;
+ color: #878989;
border-color: rgba(0, 0, 0, 0.7);
- background-image: linear-gradient(to bottom, rgba(65, 70, 72, 0.5));
+ background-image: linear-gradient(to bottom, rgba(52, 57, 57, 0.5));
background-clip: padding-box;
box-shadow: none;
text-shadow: none;
icon-shadow: none;
outline-color: rgba(238, 238, 236, 0.3); }
.osd .button.destructive-action:insensitive, .osd .button.destructive-action:backdrop:insensitive {
- color: #8e9191;
+ color: #878989;
border-color: rgba(0, 0, 0, 0.7);
- background-image: linear-gradient(to bottom, rgba(65, 70, 72, 0.5));
+ background-image: linear-gradient(to bottom, rgba(52, 57, 57, 0.5));
background-clip: padding-box;
box-shadow: none;
text-shadow: none;
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
text-shadow: none;
icon-shadow: none;
- color: #8e9191;
+ color: #878989;
border-color: rgba(0, 0, 0, 0.5);
icon-shadow: none;
box-shadow: none; }
padding: 13px;
border: none;
border-radius: 5px;
- background-color: rgba(46, 52, 54, 0.7); }
+ background-color: rgba(32, 37, 38, 0.7); }
.inline-toolbar {
border-width: 0 1px 1px;
.scale.vertical.scale-has-marks-above.scale-has-marks-below.slider {
color: #eeeeec;
border-color: rgba(0, 0, 0, 0.7);
- background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
+ background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.7));
background-clip: padding-box;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
text-shadow: 0 1px black;
icon-shadow: 0 1px black;
outline-color: rgba(238, 238, 236, 0.3);
- background-color: #2e3436; }
+ background-color: #202526; }
.osd .scale.slider:hover, .osd
.scale.scale-has-marks-above.scale-has-marks-below.slider:hover, .osd
.scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:hover {
color: white;
border-color: rgba(0, 0, 0, 0.7);
- background-image: linear-gradient(to bottom, rgba(74, 84, 87, 0.7));
+ background-image: linear-gradient(to bottom, rgba(60, 69, 71, 0.7));
background-clip: padding-box;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
text-shadow: 0 1px black;
.scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:backdrop {
color: #eeeeec;
border-color: rgba(0, 0, 0, 0.7);
- background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
+ background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.7));
background-clip: padding-box;
box-shadow: none;
text-shadow: none;
padding: 10px;
border: none;
border-radius: 0 0 6px 6px;
- background-color: rgba(46, 52, 54, 0.7);
+ background-color: rgba(32, 37, 38, 0.7);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 2px);
background-clip: padding-box; }
.app-notification:backdrop,
.app-notification.frame .button {
color: #eeeeec;
border-color: rgba(0, 0, 0, 0.7);
- background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
+ background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.7));
background-clip: padding-box;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
text-shadow: 0 1px black;
.app-notification.frame .button:hover {
color: white;
border-color: rgba(0, 0, 0, 0.7);
- background-image: linear-gradient(to bottom, rgba(74, 84, 87, 0.7));
+ background-image: linear-gradient(to bottom, rgba(60, 69, 71, 0.7));
background-clip: padding-box;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
text-shadow: 0 1px black;
.app-notification .button:insensitive, .app-notification .button:backdrop:insensitive,
.app-notification.frame .button:insensitive,
.app-notification.frame .button:backdrop:insensitive {
- color: #8e9191;
+ color: #878989;
border-color: rgba(0, 0, 0, 0.7);
- background-image: linear-gradient(to bottom, rgba(65, 70, 72, 0.5));
+ background-image: linear-gradient(to bottom, rgba(52, 57, 57, 0.5));
background-clip: padding-box;
box-shadow: none;
text-shadow: none;
.app-notification.frame .button:backdrop {
color: #eeeeec;
border-color: rgba(0, 0, 0, 0.7);
- background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
+ background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.7));
background-clip: padding-box;
box-shadow: none;
text-shadow: none;